<template>
  <v-app id="inspire">
    <v-content>
      <v-container >
        <h1 style="text-align: center">{{this.$route.params.id}}</h1>
        <h3 style="text-align: center;color: #0077B5">关于<{{this.$route.query.title}}>的讨论</h3>
        <v-container
          id="input-usage"
          fluid
        >
          <v-row v-for="(pc,index) in pcmembers"
                 :key="index"
          >
            <v-col cols="12">
              <v-input
                style="font-size: 20px"
                outlined
                :messages="pc"
                prepend-icon="phone"
              >
                {{comments[index]}}
              </v-input>
              <p style="text-align: right">{{index+1}}楼</p>
              <v-divider></v-divider>
            </v-col>

          </v-row>

        </v-container>
        <v-divider></v-divider>
        <v-container>
          <v-row>
            <v-col
              cols="12"
              md="6"
            >
              <v-textarea
                v-model="newComment"
                label="new comment"
                required
                outlined
              ></v-textarea>
            </v-col>
          </v-row>
          <v-btn type="primary" @click="sendComment">Submit</v-btn>
          <side-bar></side-bar>
        </v-container>
      </v-container>
    </v-content>
  </v-app>
</template>

<script>
  import SideBar from './Components/SideBar'
  import store from '../store'
  export default {
    name: 'ADiscussion',
    components: {SideBar},
    data() {
      const generatePCs = _ => {
        var pcmembers = []
        this.$axios.post('/getPost', {
          title: this.$route.query.title,
          meetingFullName: this.$route.params.id,
          type: this.$route.query.type,
          status: 1,
        })
          .then(resp => {
            var response = resp.data
            response.pcMembers.forEach((pcmember, index) => {
              console.log(pcmember)
              pcmembers.push(pcmember)
            })
            console.log(pcmembers)
            return pcmembers
          })
          .catch(error => {
            console.log(error)
          })
        return pcmembers
      }
      const generateComments = _ => {
        var comments = []
        this.$axios.post('/getPost', {
          title: this.$route.query.title,
          meetingFullName: this.$route.params.id,
          type: this.$route.query.type,
          status: 1,
        })
          .then(resp => {
            var response = resp.data
            response.comments.forEach((comment, index) => {
              comments.push(comment)
            })
            return comments
          })
          .catch(error => {
            console.log(error)
          })
        return comments
      }
      return {
        newComment: '',
        // posts: generateThisPost(),
        pcmembers: generatePCs(),
        comments: generateComments(),
      }
    },
    methods:{
      sendComment() {
        console.log(this.newComment)
        this.$axios.post('/commentPost', {
          title: this.$route.query.title,
          meetingFullName: this.$route.params.id,
          type: this.$route.query.type,//?这也要我填吗
          pcMember: store.state.userName,
          comment: this.newComment
        })
          .then(resp => {
            console.log(resp.data)
            if (resp.status === 200) {
                this.text = 'comment成功'
                this.snackbar = true
                location.reload()
            } else {
              this.text = 'close error'
              this.snackbar = true
            }
          })
          .catch(error => {
            this.text = 'error!'
            this.snackbar = true
          })
      }
    }
  }
</script>
